<template>
    <div id="d1">
        <!--搜索框-->
        <el-row>
            <el-col :span="12">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="食物名称">
                        <el-input v-model="tempFoodName" placeholder="食物名称"></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="5">
              <el-button type="primary" @click="search">查询</el-button>
            </el-col>
          <el-col :span="6">
              <el-button type="primary" @click="dialogFormVisible = true">添加食物</el-button>
          </el-col>
        </el-row>
        <!--表格-->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="tempFoodId" label="编号" width="100"></el-table-column>
            <el-table-column fixed prop="tempFoodName" label="食物名称" width="100"></el-table-column>
            <el-table-column prop="tempFoodType" label="食物类型" width="100"></el-table-column>
            <el-table-column prop="tempFoodHeat" label="100g含的能量"></el-table-column>
            <el-table-column prop="tempFoodProtein" label="100g含的蛋白质" width="150"></el-table-column>
            <el-table-column prop="tempFoodFat" label="每100g含的脂肪量" ></el-table-column>
            <el-table-column prop="tempFoodDesc" label="食物描述" width="200"></el-table-column>
            <el-table-column prop="tempFoodState" label="是否启用" width="100" :formatter="formatState"></el-table-column>
            <el-table-column  fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button  type="text" @click="updateFood(scope.row.tempFoodId)">修改</el-button>
                    <el-button  type="text" @click="deleteFood(scope.row.tempFoodId)"> 删除 </el-button>
                    <el-button  type="text" v-show="scope.row.tempFoodState==0" @click="staFood(scope.row.tempFoodId)"> 禁 用 </el-button>
                    <el-button  type="text" v-show="scope.row.tempFoodState==1" @click="stateFood(scope.row.tempFoodId)">启 用 </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页控件-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <!--
            @size-change：页大小发生改变时触发
            @current-change：当前页发生改变时触发
            :current-page： 用于设置当前页
            :page-size：用于设置默认的页大小
            :total：用于设置总记录数
        -->
        <el-dialog title="添加膳食信息" :visible.sync="dialogFormVisible">
        <el-form :model="food" :rules="rules" ref="foodRules">
          <el-form-item label="食物名称" :label-width="formLabelWidth" prop="tempFoodName" class="common">
            <el-input v-model="food.tempFoodName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="食物类型" :label-width="formLabelWidth" prop="tempFoodType" class="common">
            <el-input v-model="food.tempFoodType" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="100g含的能量" :label-width="formLabelWidth" prop="tempFoodHeat" class="common">
            <el-input v-model="food.tempFoodHeat" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="100g含的蛋白质" :label-width="formLabelWidth" prop="tempFoodProtein" class="common">
            <el-input v-model="food.tempFoodProtein" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="100g含的脂肪量" :label-width="formLabelWidth" prop="tempFoodFat" class="common">
            <el-input v-model="food.tempFoodFat" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="食物描述" :label-width="formLabelWidth" prop="tempFoodDesc" class="common">
            <el-input v-model="food.tempFoodDesc" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否启用" :label-width="formLabelWidth" prop="tempFoodState" class="common">
            <el-select v-model="food.tempFoodState" placeholder="请选择使用状态">
              <el-option label="启用" value="0"></el-option>
              <el-option label="不启用" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="insertFood('foodRules')">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="修改膳食信息" :visible.sync="dialogVisible">
        <el-form :model="foods" :rules="rules" ref="foodRule">
          <el-form-item label="食物id" :label-width="formLabelWidth" v-show="false">
            <el-input v-model="foods.tempFoodId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="食物名称" :label-width="formLabelWidth" prop="tempFoodName" class="common">
            <el-input v-model="foods.tempFoodName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="食物类型" :label-width="formLabelWidth" prop="tempFoodType" class="common">
            <el-input v-model="foods.tempFoodType" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="100g含的能量" :label-width="formLabelWidth" prop="tempFoodHeat" class="common">
            <el-input v-model="foods.tempFoodHeat" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="100g含的蛋白质" :label-width="formLabelWidth" prop="tempFoodProtein" class="common">
            <el-input v-model="foods.tempFoodProtein" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="100g含的脂肪量" :label-width="formLabelWidth" prop="tempFoodFat" class="common">
            <el-input v-model="foods.tempFoodFat" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="食物描述" :label-width="formLabelWidth" prop="tempFoodDesc" class="common">
            <el-input v-model="foods.tempFoodDesc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="upFood('foodRule')">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'Food',
  data () {
    return {
      dialogFormVisible: false,
      dialogVisible: false,
      tableData: [],
      currentPage: 1, // 当前页
      pageSize: 5,
      total: 0,
      tempFoodName: '',
      formLabelWidth: '133px',
      food: {},
      foods: {},
      rules: {
        tempFoodName: [
          { required: true, message: '请输入食物名称', trigger: 'blur' }
        ],
        tempFoodType: [
          { required: true, message: '请输入食物类型', trigger: 'blur' }
        ],
        tempFoodHeat: [
          { required: true, message: '请输入食物能量', trigger: 'blur' }
        ],
        tempFoodProtein: [
          { required: true, message: '请输入食物蛋白质含量', trigger: 'blur' }
        ],
        tempFoodFat: [
          { required: true, message: '请输入食物脂肪含量', trigger: 'blur' }
        ],
        tempFoodDesc: [
          { required: true, message: '请输入对食物的描述', trigger: 'blur' }
        ],
        tempFoodState: [
          { required: true, message: '请选择使用状态', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    initBookData () {
      this.$axios.get(`/api/LljTemplateFoodServlet?pageNum=${this.currentPage}&pageSize=${this.pageSize}&tempFoodName=${this.tempFoodName}`).then(result => {
        this.tableData = result.data.rows
        this.total = result.data.total
      })
    },
    // 格式化状态
    formatState (row, column, cellValue, index) {
      return row.tempFoodState === 0 ? '正常' : row.tempFoodState === 1 ? '禁用' : '未知'
    },
    handleSizeChange (value) { // value是在页大小下拉框选择的值
      this.pageSize = value
      this.initBookData()
    },
    handleCurrentChange (value) { // value是当前页码
      this.currentPage = value
      this.initBookData()
    },
    search () {
      this.currentPage = 1
      this.initBookData()
    },
    deleteFood (tempFoodId) {
      this.$confirm('此操作将删除该食物, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(`/api/LljTemplateFoodServlet/${tempFoodId}`).then(result => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.initBookData()
        })
      }).catch(() => {
        this.$message('已取消删除')
      })
    },
    insertFood (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('此操作将添加, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$axios.post(`/api/LljTemplateFoodServlet`, this.food).then(result => {
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
              this.food = {}
              this.dialogFormVisible = false
              this.initBookData()
            })
          }).catch(() => {
            this.$message('已取消添加')
          })
        } else {
          return false
        }
      })
    },
    stateFood (tempFoodId) {
      this.$confirm('确定要重新启动吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.put(`/api/LljTemplateFoodServlet/state?tempFoodId=${tempFoodId}&tempFoodState=0`).then(result => {
          this.$message({
            type: 'success',
            message: '启用成功!'
          })
          this.initBookData()
        })
      }).catch(() => {
        this.$message('已取消操作')
      })
    },
    staFood (tempFoodId) {
      this.$confirm('确定要重新禁用吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.put(`/api/LljTemplateFoodServlet/state?tempFoodId=${tempFoodId}&tempFoodState=1`).then(result => {
          this.$message({
            type: 'success',
            message: '禁用成功!'
          })
          this.initBookData()
        })
      }).catch(() => {
        this.$message('已取消操作')
      })
    },
    updateFood (tempFoodId) {
      this.dialogVisible = true
      console.log(tempFoodId)
      this.$axios.get(`/api/LljTemplateFoodServlet/${tempFoodId}`).then(result => {
        this.foods = result.data
      })
      console.log(this.foods)
    },
    upFood (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('此操作将修改该食物, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$axios.put(`/api/LljTemplateFoodServlet`, this.foods).then(result => {
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.dialogVisible = false
              this.initBookData()
            })
          }).catch(() => {
            this.$message('已取消修改')
          })
        } else {
          return false
        }
      })
    }
  },
  created () {
    this.initBookData()
  }
}
</script>
<style>
.common{
  margin-top: 23px;
}
</style>
